<template>
  <div class="ct_layout">
    <!--    <div class="ct_header">
            <a href="javascript:;" class="ct_back"></a>
            <form action="" class="ct_search">
                <input type="text" placeholder="名称">
            </form>
            <a href="javascript:;" class="ct_menu"></a>
        </div>-->
    <div class="jd_search" :style={background:background}>
      <!--<a href="javascript:;" class="jd_logo"></a>-->

      <form action="" class="jd_searchBox">
        <!--<span></span>-->
        <input type="text" placeholder="请输入商品名称">

      </form>
      <input id="searchbtn" type="button" value="查找">
      <!--<a href="javascript:;" class="jd_login">登录</a>-->
    </div>
    <div class="ct_content">
      <!--        <div class="ct_cLeft">
                  <ul>
                      <li class=""><a href="javascript:;">Java</a></li>
                      <li class="active"><a href="javascript:;">C++</a></li>
                      <li class=""><a href="javascript:;">Python</a></li>

                  </ul>
              </div>-->
      <div class="ct_cRight">
        <a href="javascript:;" class="ct_rImg">
          <img src="../assets/images/banner_1.jpg" alt="books">
        </a>
        <h3>全部书籍</h3>
        <div class="books" v-for="(iurl,iindex) in this.urls">
          <div >
            <img :src="iurl" :id="iindex" >
            <input type="button" :id="'iindex'+1" value="详细信息" @click="linkto(iindex+1)">
          </div>

        </div>


        <!--            <div class="ct_hotCategory" style="position: relative;">
                        <ul style="overflow:hidden;">
                            <li>
                            <a href="javascript:;">
                                <img src="../assets/images/nv-fy.jpg" alt="">
                                <p>毛衣</p>
                            </a>
                        </li><li>
                            <a href="javascript:;">
                                <img src="../assets/images/nv-fy.jpg" alt="">
                                <p>毛衣</p>
                            </a>
                        </li>
                        </ul>
                    </div>-->
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "CategoryContainer.vue",
        computed:{
          urls(){
            let urllist=[];
            let he='../../static/bookpic/';
            for(let i=1;i<45;i++){
              let iurl=he+i+'.jpg';
              urllist.push(iurl);
            }
            return urllist;
          }
        },
      methods:{
          linkto(id){
            this.$router.history.replace('/bookinfo/'+id);

          }
      }
    }
</script>

<style scoped>
  .jd_search{
    width: 100%;
    max-width: 640px;
    height: 40px;
    /*固定在顶部*/
    position: fixed;
    background: rgba(233,35,34,0);
    background-color: blue;
    z-index: 999;
  }
  .jd_searchBox{
    width: 100%;
    height: 100%;
    padding-left:76px;
    padding-right:50px;
  }
  .jd_searchBox > input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    border-radius: 15px;
    padding-left:30px;
    color: #666;
    font-size: 12px;
  }
  /*使用伪元素添加放大 镜*/
  .jd_searchBox::before{
    content: "";
    width: 27px;
    height: 23px;
    position: absolute;
    background: url("../assets/images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: -56px -108px;
    left: 80px;
    top:9px;
  }

  .ct_layout{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /*头部搜索块样式*/
  /*.ct_header{
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ccc;
      background-color: #eee;
      display: flex;
      flex-direction: row;
  }
  .ct_back,
  .ct_menu{
      width: 49px;
      height: 49px;
      background: url("../assets/images/sprites.png");
      background-size: 200px 200px;
      padding:14px;
      background-origin: content-box;
      !*设置是裁切，控制的是显示*!
      background-clip: content-box;
  }
  .ct_back{
      background-position: -20px 0px;
  }
  .ct_menu{
      background-position: -60px 0px;
  }
  .ct_search{
    flex: 1;
    font-size: 12px;
  }*/
  .ct_search > input{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin-top:5px;
    color: #666;
    padding-left:5px;
  }

  /*主体内容块样式*/
  .ct_content{
    width: 100%;
    flex: 1;
    display: flex;
  }
  .ct_cLeft{
    width: 100px;
    height: 100%;
    overflow: scroll;
    position: relative;
  }
  .ct_cLeft > ul {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ct_cLeft li{
    height: 50px;
    width: 100%;
  }
  .ct_cLeft li > a{
    width: 100%;
    height: 100%;
    display: block;
    background-color: #eee;
    color: #333;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-right:1px solid #ccc;
  }
  .ct_cLeft li.active > a{
    background-color: #fff;
    border-right: none;
    border-bottom: none;
    color: #e92322;
  }
  .ct_cRight{
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .ct_rImg{
    width: 100%;
    display: block;
  }
  .ct_rImg > img{
    width: 100%;
    display: block;
  }
  .ct_cRight > h3{
    height: 30px;
    line-height: 30px;
    padding-left:10px;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
  }
  .ct_hotCategory{
    width: 100%;
    overflow: scroll;
    flex: 1;
  }
  .ct_hotCategory  li{
    width: 33.33%;
    float: left;
    text-align: center;
  }
  #searchbtn{

  }
</style>
